<template>
  <div>
    <div class="wxInter">
      <span class="title">微信公众号</span>
      <p
        >接入微信公众号实现微信账号授权登陆、微信公众号底部菜单管理、微信公众号模版消息通知管理
        <span>只限认证服务号类型</span></p
      >
      <div class="card">
        <div class="img">
          <img src="@/assets/image/weixin.png" alt="" />
        </div>
        <div v-show="!isAuthor" style="display: flex; gap: 5px">
          <span class="bg-gray">未接入公众号</span>&nbsp;&nbsp;
          <HLink @click="toAuthor()">
            <span>扫码授权接入</span>
            <el-icon><ArrowRightBold /></el-icon>
          </HLink>
        </div>
        <div v-show="isAuthor" style="display: flex; gap: 5px">
          <span class="bg-gray">已接入公众号</span>&nbsp;&nbsp;
          <HLink @click="onCancelAuthor()">
            <span>取消授权</span>
            <el-icon><ArrowRightBold /></el-icon>
          </HLink>
        </div>
      </div>
    </div>

    <!-- 授权页面二维码 -->
    <el-dialog
      v-model="authorPageDialog"
      title="公众平台账号授权"
      width="80%"
      top="2vh"
      style="height: 900px"
    >
      <iframe :src="AuthorQrPage" style="width: 100%; height: 820px"></iframe>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, watch } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { v4 as uuid } from 'uuid'
  import { initWebSocket } from '../../../../../../../utils/socket'
  import {
    getCustomerWxAuthor,
    getWxThridAuthorizePage,
    cancelCustomerWxAuthor,
  } from '../../../../../../../api/wxApi'
  import { ArrowRightBold } from '@element-plus/icons-vue'
  import HLink from '@/components/common/link/HLink.vue'
  import { HMessage } from '@/components/common/message'

  const isAuthor = ref(false) // 是否已授权认证
  const authorPageDialog = ref(false) // 授权页面二维码
  const AuthorQrPage = ref('') // 二维码授权页面

  // 关闭授权页面
  const onclose = () => {
    AuthorQrPage.value = ''
    authorPageDialog.value = false
    getCustomerWxAuthorApi()
    HMessage.success('授权成功')
    // 关闭webSocket
  }

  // 开启webSocket
  const openWebsocket = (uuid: string) => {
    initWebSocket(onclose, `/ws/wx/${uuid}`)
  }

  // 发起第三方授权
  const toAuthor = () => {
    AuthorQrPage.value = ''
    const uuidNumber = uuid()
    getWxThridAuthorizePage(uuidNumber).then((res) => {
      if (!res.data.success) {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
        return
      }
      openWebsocket(uuidNumber)
      authorPageDialog.value = true
      AuthorQrPage.value = res.data.data.row
    })
  }
  //监听查看附件弹窗关闭时销毁 iframe内存
  watch(authorPageDialog, (n) => {
    if (!n) {
      AuthorQrPage.value = 'about:blank'
    }
  })
  // 取消授权接入
  const onCancelAuthor = () => {
    ElMessageBox({
      title: '敬告提示',
      message: '取消授权后，微信所有相关功能都将无法使用，是否确认取消授权？',
      showCancelButton: true,
      confirmButtonText: '确认取消授权',
      cancelButtonText: '取消',
      type: 'warning',
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = '正在取消授权...'
          cancelCustomerWxAuthorApi()
          setTimeout(() => {
            done()
            setTimeout(() => {
              instance.confirmButtonLoading = false
            }, 300)
          }, 1000)
        } else {
          done()
        }
      },
    }).catch(() => {})
  }

  // 取消授权接入
  const cancelCustomerWxAuthorApi = () => {
    cancelCustomerWxAuthor().then((res) => {
      ElMessage({
        type: res.data.success ? 'success' : 'error',
        message: res.data.message,
      })
      if (res.data.success) {
        isAuthor.value = false
      }
    })
  }

  // 获取商家微信授权信息
  const getCustomerWxAuthorApi = () => {
    getCustomerWxAuthor().then((res) => {
      isAuthor.value = res.data?.data.row.author
    })
  }

  onMounted(() => {
    getCustomerWxAuthorApi()
  })
</script>

<style scoped lang="scss">
  @import '../../index.scss';
</style>
